<template>
  <div class="problem-warning">
    <div class="content">
      <div class="head-opt">
        <el-button-group>
          <el-button size="small" @click="active = 1" :class="{'el-button el-button--primary': active === 1}">业务组</el-button>
          <el-button size="small" v-if="hasPermission('warningProduct')" @click="active = 0" :class="{'el-button el-button--primary': active === 0}">产品线</el-button>
        </el-button-group>
        <el-select  size="small" v-model="areaTeamId" placeholder="请选择区域">
          <el-option
            v-for="item in areaTeams"
            :key="item.areaTeamId"
            :label="item.name"
            :value="item.areaTeamId">
          </el-option>
        </el-select>
        <el-date-picker
          v-model="year"
          type="year"
          placeholder="选择年">
        </el-date-picker>
        <div>
          <el-select :disabled="periods.length === 0" v-model="periodId" placeholder="请选择">
            <el-option
              v-for="item in periods"
              :key="item.periodId"
              :label="item.periodName"
              :value="item.periodId">
            </el-option>
          </el-select>
        </div>
        <el-button size="small" type="success"  @click="getWarningOfAreaTeam">查询</el-button>
      </div>
      <div v-show="active === 1" class="am-u-sm-12">
        <el-table
          :data="mainAccountCostAndIncomeList"
          border
          empty-text="暂无数据"
          stripe
          style="min-width: 100%">
          <el-table-column
            prop="name"
            label="财务主体">
          </el-table-column>
          <el-table-column
            prop="targetIncome"
            label="目标营收（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.targetIncome)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="income"
            label="实际营收（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.income)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="营收完成率">
            <template scope="scope">
              <div v-if="scope.row.targetIncome">
                {{Number(scope.row.income) ===0 ? 0 :Number(scope.row.income)/Number(scope.row.targetIncome)*100 | formatNumber(2)}}%
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="targetProfits"
            label="目标利润（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.targetProfits)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="profits"
            label="实际利润（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.profits)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="利润完成率">
            <template scope="scope">
              <div v-if="scope.row.targetProfits">
                {{Number(scope.row.profits) ===0 ? 0 :Number(scope.row.profits)/Number(scope.row.targetProfits)*100 | formatNumber(2)}}%
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="active === 0" class="am-u-sm-12">
        <el-table
          :data="productCostAndIncomeVoList"
          border
          empty-text="暂无数据"
          stripe
          style="min-width: 100%">
          <el-table-column
            prop="productName"
            label="产品线">
          </el-table-column>
          <el-table-column
            prop="targetIncome"
            label="目标营收（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.targetIncome)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="income"
            label="实际营收（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.income)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="营收完成率">
            <template scope="scope">
              <div v-if="scope.row.targetIncome">
                {{Number(scope.row.income) ===0 ? 0 :Number(scope.row.income)/Number(scope.row.targetIncome)*100 | formatNumber(2)}}%
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="targetProfits"
            label="目标利润（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.targetProfits)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="profits"
            label="实际利润（元）">
            <template scope="scope">
              <div>
                {{Number(scope.row.profits)| formatNumber(2)}}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="利润完成率">
            <template scope="scope">
              <div v-if="scope.row.targetProfits">
                {{Number(scope.row.profits) ===0 ? 0 :Number(scope.row.profits)/Number(scope.row.targetProfits)*100 | formatNumber(2)}}%
              </div>
              <div v-else>
                -
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import io from '../../lib/io'
  import moment from 'moment'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button";

  export default{
    components: {ElButton},
    data:function(){
      return {
        periodId: '',
        areaTeamId: '',
        periods: [],
        year: moment().format('YYYY'),
        active: 1,
        productCostAndIncomeVoList:[],
        mainAccountCostAndIncomeList:[],
        activeName: 'first',
        searchConfig:{},
      }
    },
    watch: {
      areaTeamId(newVal) {
        this.loadPeriodByYear()
        this.getWarningOfAreaTeam()
      },
      year(newVal) {
        if (!!newVal) {
          this.loadPeriodByYear()
        }
      },
    },
    mounted:function(){
      $(window).smoothScroll()
    },
    computed: {
      areaTeams: function () {
        return window.config.areaTeams || []
      },
    },
    created:function(){
      this.areaTeamId = window.config.areaTeams[0].areaTeamId || ''
      this.loadPeriodByYear()
    },
    methods:{
      loadPeriodByYear: function () {
        var _this = this;
        if(!this.areaTeamId || !this.year) {
          return
        }
        io.post(io.periodByYearAndAreaTeamId,{
          areaTeamId: this.areaTeamId,
          year: this.year ? moment(this.year).format('YYYY'): '',
        },function(ret){
          if(ret.success){
            _this.periods = ret.data
            _this.periodId = ret.data.filter(item => item.isCurrent == 1 )[0].periodId
            _this.getWarningOfAreaTeam()
          }else{
            _this.$alert(ret.desc)
          }
        })
      },
      getWarningOfAreaTeam:function(){
        var _this = this;
        if(!this.areaTeamId || !this.periodId){
          return
        }
        _this.$showLoading()
        io.post(io.warningOfAreaTeam,{
          areaTeamId:_this.areaTeamId,
          periodId: _this.periodId
        },function(ret){
          if(ret.success){
          	let sumIncome=0,sumTargetIncome=0,sumProfits=0,sumTargetProfits=0;
            _this.$hiddenLoading()
            _this.productCostAndIncomeVoList = ret.data.productCostAndIncomeVoList
            _this.mainAccountCostAndIncomeList = ret.data.mainAccountCostAndIncomeList
            ret.data.mainAccountCostAndIncomeList.map(val => {
            	sumIncome += Number(val.income)
            	sumTargetIncome += Number(val.targetIncome)
            	sumProfits += Number(val.profits)
            	sumTargetProfits += Number(val.targetProfits)
            })
            _this.mainAccountCostAndIncomeList.push({
              name : "总计",
              income: sumIncome,
              targetIncome: sumTargetIncome,
              profits: sumProfits,
              targetProfits: sumTargetProfits,
            })
            sumIncome=0;sumTargetIncome=0;sumProfits=0;sumTargetProfits=0;
            ret.data.productCostAndIncomeVoList.map(val => {
              sumIncome += Number(val.income)
              sumTargetIncome += Number(val.targetIncome)
              sumProfits += Number(val.profits)
              sumTargetProfits += Number(val.targetProfits)
            })
            _this.productCostAndIncomeVoList.push({
              productName : "总计",
              income: sumIncome,
              targetIncome: sumTargetIncome,
              profits: sumProfits,
              targetProfits: sumTargetProfits,
            })
          }else{
            _this.$alert(ret.desc)
          }
        })
      },
    }
  }
</script>
<style lang="less" scoped>
  .problem-warning {
    .content {
      overflow: hidden;
      padding: 20px;
      margin-bottom: 30px;
      .title {
        text-align: center;
        color: #333;
        font-size: 18px;
        font-weight: bold;
        margin: 20px 0;
      }
      .head-opt {
        text-align: center;
        margin: 0 auto 20px;
        &>div {
          display: inline-block;
        }
        input {
          height: 36px;
        }
        .el-date-editor--year {
          width: 193px;
        }
      }
    }
  }
</style>
